<li>
  <div
    :class="{ bold: isFolder }"
    @click="toggle"
    @dblclick="changeType">
    {{ model.name }}
    <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
  </div>
  <ul v-show="isOpen" v-if="isFolder">
    <!--
      A component can recursively render itself using its
      "name" option (inferred from filename if using SFC)
    -->
    <TreeItem
      class="item"
      v-for="model in model.children"
      :model="model">
    </TreeItem>
    <li class="add" @click="addChild">+</li>
  </ul>
</li>